﻿@model Test.Mvc.Models.TestWeatherViewModel

@{
    ViewData["Title"] = "天气查询";
    // 1. 强制初始化模型，避免 null
    var safeModel = Model ?? new Test.Mvc.Models.TestWeatherViewModel
    {
        Forecasts = new List<Test.Mvc.Models.WeatherForecast>(),
        WarningColor = "black", // 默认颜色
        Warning = "无预警",      // 默认提示
        LocationName = ""       // 默认地点名称
    };
}

<div class="weather-bg">
    <div class="clouds">
        <div class="cloud cloud1"></div>
        <div class="cloud cloud2"></div>
        <div class="cloud cloud3"></div>
        <div class="cloud cloud4"></div>
    </div>
</div>

<div class="container">
    <div class="header-section">
        <h1 class="main-title">
            <i class="weather-icon">🌤️</i>
            7 天天气预报查询
        </h1>
        <p class="subtitle">输入经纬度坐标，获取精准天气预报</p>
    </div>

    <div class="main-container">
        <div class="input-section">
            <div class="section-header">
                <i class="icon">📍</i>
                <h3>坐标输入</h3>
            </div>
            <form asp-action="weather" method="post" class="weather-form">
                @Html.AntiForgeryToken()
                <div class="form-group">
                    <label class="form-label">
                        <i class="icon">🌍</i>
                        纬度
                    </label>
                    <input type="number" step="any" class="form-control modern-input"
                           asp-for="Latitude" value="@safeModel.Latitude" required 
                           placeholder="例如: 39.9042" />
                </div>
                <div class="form-group">
                    <label class="form-label">
                        <i class="icon">🌐</i>
                        经度
                    </label>
                    <input type="number" step="any" class="form-control modern-input"
                           asp-for="Longitude" value="@safeModel.Longitude" required 
                           placeholder="例如: 116.4074" />
                </div>
                <button type="submit" class="btn btn-primary modern-btn">
                    <i class="icon">🔍</i>
                    查询天气
                </button>
            </form>
        </div>
        
        <div class="chart-section">
            <div class="section-header">
                <i class="icon">📊</i>
                <h3>温度趋势图</h3>
            </div>
            <div id="weatherChart" class="chart-container">
                @if (!safeModel.Forecasts.Any())
                {
                    <div class="empty-chart">
                        <i class="empty-icon">📈</i>
                        <p>请查询天气数据以显示温度趋势图</p>
                    </div>
                }
            </div>
        </div>
    </div>
</div>

@if (safeModel.Forecasts.Any())
{
    <div class="results-section">
        <div class="results-header">
            <h2 class="location-title">
                <i class="icon">🏠</i>
                @(string.IsNullOrEmpty(safeModel.LocationName) ? "7 天天气预报" : $"{safeModel.LocationName} 7 天天气预报")
            </h2>
            <div class="legend">
                <div class="legend-item">
                    <span class="legend-color warning-yellow"></span>
                    <span>黄色：阵雨或高温</span>
                </div>
                <div class="legend-item">
                    <span class="legend-color warning-orange"></span>
                    <span>橙色：雷阵雨</span>
                </div>
                <div class="legend-item">
                    <span class="legend-color warning-red"></span>
                    <span>红色：极端高温</span>
                </div>
            </div>
        </div>
        
        <div class="table-container">
            <table class="weather-table">
                <thead>
                    <tr>
                        <th><i class="icon">📅</i> 日期</th>
                        <th><i class="icon">🌦️</i> 天气</th>
                        <th><i class="icon">🌡️</i> 温度（°C）</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var forecast in safeModel.Forecasts)
                    {
                        // 计算天气预警（基于天气现象）
                        string weatherWarnText = null;
                        string weatherWarnColor = null;
                        var weatherText = forecast.Weather ?? string.Empty;
                        if (!string.IsNullOrEmpty(weatherText))
                        {
                            if (weatherText.Contains("雷阵雨") || weatherText.Contains("暴雨"))
                            {
                                weatherWarnText = "橙色预警";
                                weatherWarnColor = "orange";
                            }
                            else if (weatherText.Contains("阵雨"))
                            {
                                weatherWarnText = "黄色预警";
                                weatherWarnColor = "gold";
                            }
                        }

                        // 计算温度预警
                        string tempWarnText = null;
                        string tempWarnColor = null;
                        if (forecast.Temperature > 40)
                        {
                            tempWarnText = "红色预警";
                            tempWarnColor = "red";
                        }
                        else if (forecast.Temperature > 35)
                        {
                            tempWarnText = "黄色预警";
                            tempWarnColor = "gold";
                        }
                        <tr class="forecast-row">
                            <td class="date-cell">
                                <div class="date-info">
                                    <span class="date-text">@forecast.Date.ToString("MM/dd")</span>
                                    <span class="weekday">@forecast.Date.ToString("ddd")</span>
                                </div>
                            </td>
                            <td class="weather-cell">
                                <span class="weather-text @(string.IsNullOrEmpty(weatherWarnColor) ? "" : $"warning-{weatherWarnColor}")">
                                    @weatherText
                                </span>
                            </td>
                            <td class="temp-cell">
                                <span class="temperature @(string.IsNullOrEmpty(tempWarnColor) ? "" : $"warning-{tempWarnColor}")">
                                    @forecast.Temperature°C
                                </span>
                            </td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>

        <!-- 2. 修复：确保 WarningColor 和 Warning 非空 -->
        @if (!string.IsNullOrEmpty(safeModel.Warning))
        {
            <div class="warning-section">
                <h2 class="warning-title" style="color: @(safeModel.WarningColor ?? "black")">
                    <i class="icon">⚠️</i>
                    @safeModel.Warning
                </h2>
            </div>
        }
    </div>
}
else
{
    <div class="empty-state">
        <i class="empty-icon">🌤️</i>
        <p>暂无数据，请点击查询按钮获取天气预报。</p>
    </div>
}

<style>
    /* 全局样式 */
    * {
        box-sizing: border-box;
    }

    body {
        margin: 0;
        padding: 0;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background: #f8f9fa;
        color: #333;
        line-height: 1.6;
    }

    .container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 20px;
        position: relative;
        z-index: 1;
    }

    /* 背景动画 */
    .weather-bg {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        overflow: hidden;
    }

    .clouds {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .cloud {
        position: absolute;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 50px;
        opacity: 0.6;
        animation: float 20s infinite linear;
    }

    .cloud1 {
        width: 100px;
        height: 40px;
        top: 20%;
        left: -100px;
        animation-delay: 0s;
    }

    .cloud2 {
        width: 80px;
        height: 30px;
        top: 40%;
        left: -80px;
        animation-delay: 5s;
    }

    .cloud3 {
        width: 120px;
        height: 50px;
        top: 60%;
        left: -120px;
        animation-delay: 10s;
    }

    .cloud4 {
        width: 60px;
        height: 25px;
        top: 80%;
        left: -60px;
        animation-delay: 15s;
    }

    @@keyframes float {
        0% { left: -100px; }
        100% { left: 100%; }
    }

    /* 标题区域 */
    .header-section {
        text-align: center;
        margin-bottom: 40px;
        color: white;
    }

    .main-title {
        font-size: 3rem;
        font-weight: 700;
        margin: 0 0 10px 0;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
    }

    .weather-icon {
        font-size: 3.5rem;
        animation: bounce 2s infinite;
    }

    @@keyframes bounce {
        0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
        40% { transform: translateY(-10px); }
        60% { transform: translateY(-5px); }
    }

    .subtitle {
        font-size: 1.2rem;
        opacity: 0.9;
        margin: 0;
        font-weight: 300;
    }

    /* 主要内容区域 */
    .main-container {
        display: grid;
        grid-template-columns: 350px 1fr;
        gap: 30px;
        margin-bottom: 40px;
    }

    /* 输入区域 */
    .input-section {
        background: rgba(255, 255, 255, 0.95);
        border-radius: 20px;
        padding: 25px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        height: fit-content;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .input-section:hover {
        transform: translateY(-5px);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    }

    .section-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 25px;
        padding-bottom: 15px;
        border-bottom: 2px solid #e9ecef;
    }

    .section-header h3 {
        margin: 0;
        color: #495057;
        font-size: 1.3rem;
        font-weight: 600;
    }

    .icon {
        font-size: 1.2rem;
    }

    .weather-form {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .form-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .form-label {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
        color: #495057;
        font-size: 0.95rem;
    }

    .modern-input {
        padding: 15px 20px;
        border: 2px solid #e9ecef;
        border-radius: 12px;
        font-size: 1rem;
        transition: all 0.3s ease;
        background: white;
    }

    .modern-input:focus {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        transform: translateY(-2px);
    }

    .modern-btn {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        padding: 15px 30px;
        border-radius: 12px;
        color: white;
        font-size: 1.1rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
    }

    .modern-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4);
    }

    .modern-btn:active {
        transform: translateY(-1px);
    }

    /* 图表区域 */
    .chart-section {
        background: rgba(255, 255, 255, 0.95);
        border-radius: 20px;
        padding: 25px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .chart-section:hover {
        transform: translateY(-5px);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    }

    .chart-container {
        width: 100%;
        height: 350px;
        border-radius: 15px;
        overflow: hidden;
    }

    .empty-chart {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: #6c757d;
        font-size: 1.1rem;
        text-align: center;
    }

    .empty-icon {
        font-size: 3rem;
        margin-bottom: 15px;
        opacity: 0.6;
    }

    /* 结果区域 */
    .results-section {
        background: rgba(255, 255, 255, 0.95);
        border-radius: 20px;
        padding: 30px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        margin-bottom: 30px;
    }

    .results-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
        padding-bottom: 20px;
        border-bottom: 2px solid #e9ecef;
        flex-wrap: wrap;
        gap: 20px;
    }

    .location-title {
        margin: 0;
        color: #495057;
        font-size: 1.8rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .legend {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
    }

    .legend-item {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.9rem;
        color: #6c757d;
    }

    .legend-color {
        width: 16px;
        height: 16px;
        border-radius: 4px;
        display: inline-block;
    }

    .warning-yellow { background: #ffc107; }
    .warning-orange { background: #fd7e14; }
    .warning-red { background: #dc3545; }

    /* 表格样式 */
    .table-container {
        overflow-x: auto;
        border-radius: 15px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        width: 100%;
    }

    .weather-table {
        width: 100%;
        border-collapse: collapse;
        background: white;
        border-radius: 15px;
        overflow: hidden;
        table-layout: fixed;
        min-width: 520px;
    }

    .weather-table th {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 20px 15px;
        text-align: left;
        font-weight: 600;
        font-size: 1rem;
        white-space: nowrap;
        border: none;
        position: relative;
    }

    .weather-table th:nth-child(1) {
        width: 150px !important;
        min-width: 150px !important;
        max-width: 150px !important;
    }

    .weather-table th:nth-child(2) {
        width: 250px !important;
        min-width: 250px !important;
        max-width: 250px !important;
    }

    .weather-table th:nth-child(3) {
        width: 120px !important;
        min-width: 120px !important;
        max-width: 120px !important;
        text-align: center;
    }

    .weather-table td {
        padding: 20px 15px;
        border-bottom: 1px solid #f1f3f4;
        transition: background-color 0.3s ease;
    }

    .forecast-row:hover {
        background-color: #f8f9fa;
        transform: scale(1.01);
    }

    .date-cell {
        width: 150px !important;
        min-width: 150px !important;
        max-width: 150px !important;
    }

    .date-info {
        display: flex;
        flex-direction: column;
        gap: 4px;
        align-items: flex-start;
    }

    .date-text {
        font-weight: 600;
        color: #495057;
        font-size: 1.1rem;
    }

    .weekday {
        font-size: 0.85rem;
        color: #6c757d;
        text-transform: uppercase;
    }

    .weather-cell {
        width: 250px !important;
        min-width: 250px !important;
        max-width: 250px !important;
    }

    .weather-text {
        font-weight: 500;
        padding: 6px 12px;
        border-radius: 20px;
        background: #f8f9fa;
        display: inline-block;
        transition: all 0.3s ease;
        white-space: nowrap;
    }

    .weather-text.warning-orange {
        background: #fff3cd;
        color: #856404;
        border: 1px solid #ffeaa7;
    }

    .weather-text.warning-gold {
        background: #fff3cd;
        color: #856404;
        border: 1px solid #ffeaa7;
    }

    .temp-cell {
        width: 120px !important;
        min-width: 120px !important;
        max-width: 120px !important;
        text-align: center;
    }

    .temperature {
        font-weight: 700;
        font-size: 1.2rem;
        padding: 8px 16px;
        border-radius: 25px;
        background: #e3f2fd;
        color: #1976d2;
        display: inline-block;
        transition: all 0.3s ease;
    }

    .temperature.warning-gold {
        background: #fff3cd;
        color: #856404;
        border: 1px solid #ffeaa7;
    }

    .temperature.warning-red {
        background: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }

    /* 预警区域 */
    .warning-section {
        margin-top: 30px;
        padding: 20px;
        background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
        border-radius: 15px;
        border-left: 5px solid #ffc107;
        text-align: center;
    }

    .warning-title {
        margin: 0;
        font-size: 1.5rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }

    /* 空状态 */
    .empty-state {
        text-align: center;
        padding: 60px 20px;
        background: rgba(255, 255, 255, 0.95);
        border-radius: 20px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .empty-state .empty-icon {
        font-size: 4rem;
        margin-bottom: 20px;
        opacity: 0.6;
    }

    .empty-state p {
        font-size: 1.2rem;
        color: #6c757d;
        margin: 0;
    }

    /* 响应式设计 */
    @@media (max-width: 1200px) {
        .main-container {
            grid-template-columns: 1fr;
            gap: 20px;
        }
        
        .input-section {
            order: 2;
        }
        
        .chart-section {
            order: 1;
        }
    }

    @@media (max-width: 768px) {
        .container {
            padding: 15px;
        }
        
        .main-title {
            font-size: 2rem;
            flex-direction: column;
            gap: 10px;
        }
        
        .results-header {
            flex-direction: column;
            align-items: flex-start;
        }
        
        .legend {
            justify-content: flex-start;
        }
        
        .weather-table th,
        .weather-table td {
            padding: 15px 10px;
        }
        
        .date-info {
            text-align: center;
        }
    }

    @@media (max-width: 480px) {
        .main-title {
            font-size: 1.5rem;
        }
        
        .subtitle {
            font-size: 1rem;
        }
        
        .input-section,
        .chart-section,
        .results-section {
            padding: 20px;
        }
        
        .weather-table {
            font-size: 0.9rem;
        }
    }
</style>

<!-- 引入 ECharts - 使用多个备用CDN -->
<script>
    // 尝试加载ECharts的多个CDN源
    function loadECharts() {
        const cdnSources = [
            'https://unpkg.com/echarts@5.4.3/dist/echarts.min.js',
            'https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js',
            'https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js'
        ];
        
        function tryLoadScript(src, callback) {
            const script = document.createElement('script');
            script.src = src;
            script.onload = function() {
                console.log('ECharts 加载成功:', src);
                callback(true);
            };
            script.onerror = function() {
                console.log('ECharts 加载失败:', src);
                callback(false);
            };
            document.head.appendChild(script);
        }
        
        function loadNext(index) {
            if (index >= cdnSources.length) {
                console.error('所有ECharts CDN都加载失败');
                return;
            }
            
            tryLoadScript(cdnSources[index], function(success) {
                if (!success) {
                    loadNext(index + 1);
                }
            });
        }
        
        loadNext(0);
    }
    
    // 页面加载时开始加载ECharts
    loadECharts();
</script>

<script>
    // 等待页面加载完成
    document.addEventListener('DOMContentLoaded', function() {
        console.log('页面加载完成');
        
        @if (safeModel.Forecasts.Any())
        {
            <text>
            console.log('有天气数据，准备初始化图表');
            
            // 准备图表数据
            var chartData = {
                dates: [@Html.Raw(string.Join(",", safeModel.Forecasts.Select(f => $"'{f.Date:MM/dd}'")))],
                temperatures: [@string.Join(",", safeModel.Forecasts.Select(f => f.Temperature))],
                weathers: [@Html.Raw(string.Join(",", safeModel.Forecasts.Select(f => $"'{f.Weather}'")))]
            };

            console.log('图表数据:', chartData);

            // 等待ECharts加载完成
            function waitForECharts() {
                if (typeof echarts !== 'undefined') {
                    console.log('ECharts 已加载，开始初始化图表');
                    initChart(chartData);
                } else {
                    console.log('等待ECharts加载...');
                    setTimeout(waitForECharts, 100);
                }
            }
            
            // 开始等待ECharts
            waitForECharts();
            </text>
        } else {
            <text>
            console.log('没有天气数据，不显示图表');
            </text>
        }
    });

    function initChart(chartData) {
        console.log('开始初始化图表');
        
        // 检查ECharts是否加载
        if (typeof echarts === 'undefined') {
            console.error('ECharts 未加载');
            return;
        }
        
        // 获取图表容器
        var chartDom = document.getElementById('weatherChart');
        if (!chartDom) {
            console.error('未找到图表容器 #weatherChart');
            return;
        }
        
        console.log('找到图表容器，开始初始化');
        
        try {
            var myChart = echarts.init(chartDom);
            
            var option = {
                title: {
                    text: '7天温度趋势',
                    left: 'center',
                    textStyle: {
                        color: '#495057',
                        fontSize: 18,
                        fontWeight: 'bold'
                    },
                    top: 20
                },
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(255, 255, 255, 0.95)',
                    borderColor: '#667eea',
                    borderWidth: 2,
                    textStyle: {
                        color: '#333'
                    },
                    formatter: function(params) {
                        var dataIndex = params[0].dataIndex;
                        return '<div style="padding: 8px;">' +
                               '<div style="font-weight: bold; margin-bottom: 8px; color: #667eea;">' + chartData.dates[dataIndex] + '</div>' +
                               '<div style="margin-bottom: 5px;"><span style="color: #ff6b6b;">🌡️ 温度:</span> ' + params[0].value + '°C</div>' +
                               '<div><span style="color: #4ecdc4;">🌦️ 天气:</span> ' + chartData.weathers[dataIndex] + '</div>' +
                               '</div>';
                    }
                },
                xAxis: {
                    type: 'category',
                    data: chartData.dates,
                    axisLabel: {
                        color: '#6c757d',
                        fontSize: 12,
                        fontWeight: 500
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#dee2e6',
                            width: 2
                        }
                    },
                    axisTick: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '温度 (°C)',
                    nameTextStyle: {
                        color: '#6c757d',
                        fontSize: 12,
                        fontWeight: 500
                    },
                    axisLabel: {
                        color: '#6c757d',
                        fontSize: 12,
                        fontWeight: 500,
                        formatter: '{value}°C'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#dee2e6',
                            width: 2
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#f1f3f4',
                            width: 1,
                            type: 'dashed'
                        }
                    }
                },
                series: [{
                    name: '温度',
                    type: 'line',
                    data: chartData.temperatures,
                    smooth: true,
                    lineStyle: {
                        color: '#667eea',
                        width: 4,
                        shadowColor: 'rgba(102, 126, 234, 0.3)',
                        shadowBlur: 10
                    },
                    itemStyle: {
                        color: '#667eea',
                        borderWidth: 3,
                        borderColor: '#fff',
                        shadowColor: 'rgba(0, 0, 0, 0.2)',
                        shadowBlur: 5
                    },
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'rgba(102, 126, 234, 0.3)'
                            }, {
                                offset: 1, color: 'rgba(102, 126, 234, 0.05)'
                            }]
                        }
                    },
                    markPoint: {
                        data: [
                            {type: 'max', name: '最高温度'},
                            {type: 'min', name: '最低温度'}
                        ],
                        itemStyle: {
                            color: '#667eea'
                        },
                        label: {
                            color: '#fff',
                            fontWeight: 'bold'
                        }
                    },
                    emphasis: {
                        itemStyle: {
                            color: '#764ba2',
                            borderColor: '#fff',
                            borderWidth: 4,
                            shadowColor: 'rgba(118, 75, 162, 0.5)',
                            shadowBlur: 15
                        }
                    }
                }],
                grid: {
                    left: '10%',
                    right: '10%',
                    top: '20%',
                    bottom: '15%'
                },
                animation: true,
                animationDuration: 2000,
                animationEasing: 'cubicOut'
            };

            console.log('设置图表选项');
            myChart.setOption(option);
            console.log('图表初始化成功');

            // 响应式调整
            window.addEventListener('resize', function() {
                myChart.resize();
            });
            
        } catch (error) {
            console.error('图表初始化失败:', error);
        }
    }
</script>
